{% extends 'layout/base01.html' %}


<!--
继承模板后需要修改的地方:
1. 标题
2. 内容 --- 表单
3. 样式 ---- CSS
4. Script --- 事件
-->

<!-- 添加自己页面的内容 -->
<!-- 修改标题 -->
{% block title %}
    用户注册
{% endblock %}

<!-- 修改样式 -->
{% block css %}
    <style>
        #regForm {
            width: 500px;
            margin: 40px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
            padding: 30px;
            border-radius: 20px;
        }
        .error_msg {
            color: red;
            position: absolute;
        }
    </style>
{% endblock %}

<!-- 修改内容 -->
{% block content %}
    <form id="regForm">
        {% csrf_token %}
        <h1 style="text-align: center">用户注册</h1>
        <hr>
        <!-- 通过form对象快速生成表单 -->
        {% for field in form %}
            <!--判断是不是验证码的字段 -->
            {% if field.name == 'code' %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                    <div class="clearfix">
                        <div class="col-md-6" style="padding-left: 0">
                            {{ field }}
                            <span class="error_msg"></span>
                        </div>
                        <div class="col-md-6">
                            <input type="button" class="btn btn-success" id="btnSMS" value="点击获取验证码"
                                   style="width:200px">
                        </div>
                    </div>
                </div>
            {% else %}
                <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}:</label>
                    {{ field }} <!-- 添加一个属性 class="form-control" -->
                    <span class="error_msg"></span>
                </div>
            {% endif %}
        {% endfor %}
        <div style="margin-top: 30px">
            <input type="button" id="btnSubmit" class="btn btn-primary" style="width: 120px" value="注册">
            <a href="{% url 'login' %}" style="margin-left: 20px">账号登陆？</a>
            <a href="{% url 'sms_login' %}" style="margin-left: 10px">验证码登陆？</a>
            <a href="{% url 'resetpassword' %}" style="margin-left: 10px">忘记密码？</a>
        </div>
    </form>
{% endblock %}

<!-- 修改Script -->
{% block js %}
    <script>
        // 入口函数
        $(function () {
         $('#btnSMS').click(function () {
                //发起Ajax请求
                $.ajax({
                    url: "{% url 'sms_send' %}",
                    method: 'post',
                    data: {
                        mobile_phone: $('#id_mobile_phone').val(),
                        tpl: "register",
                        csrfmiddlewaretoken: "{{ csrf_token }}"
                    },
                    dataType: 'json',
                    success: function (res) {
                        console.log(res);
                        //如果status == True ,倒计时
                        if (res.status) {
                            btnSmsTimeCountDown();
                        } else {

                            $.each(res.errors, function (key,value) {
                                $('#id_'+key).next().text(value[0]);
                            });

                        }
                    }
                })

            });

            // =============响应用户注册的按钮事件================
            $('#btnSubmit').click(function () {
                //======清除之前的所有错误展示=====
                $('.error_msg').empty();
                // ====Ajax====
                $.ajax({
                    url:"{% url 'register' %}",
                    method: "post",
                    data: $('#regForm').serialize(),
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        if (res.status){
                            alert("账号注册成功！");
                            //跳转到登录页面
                            location.href = res.url;
                        } else {
                            //遍历错误
                            $.each(res.errors, function (key,value) {
                                $('#id_' + key).next().text(value[0]);
                            })
                        }
                    }
                })
            })
    // ============ 响应发送短信按钮的事件 ==============

        });

        // ===============实现按钮上的倒计时==============
        function btnSmsTimeCountDown() {
            //获取倒计时按钮对象
            let btnSms = $('#btnSMS');
            //让按钮禁用
            btnSms.attr('disabled', true);
            //定义一个倒计时的时间
            let time = 59;
            // 使用JS在页面反复执行
            let timeCountDown = setInterval(function () {
                //在按钮上显示倒计时的时间
                btnSms.attr('value', time + '秒后重新获取验证码');
                // time - 1
                time -= 1;
                //判断倒计时有没有结束
                if (time < 0) {
                    // 让倒计时停止
                    clearInterval(timeCountDown);
                    //把按钮启用，并且显示正确的文本
                    btnSms.attr('disabled', false).val('点击获取验证码');
                }

            }, 1000)
        }
    </script>
{% endblock %}

